<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分类</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
    <link rel="stylesheet" th:href="@{/css/my.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <nav class="main-header  animated fadeInDown navbar navbar-expand navbar-white navbar-light ">
        <!-- Left navbar links -->
        <ul class="navbar-nav animated fadeIn">
            <li class="nav-item">
                <!-- PushMenu插件控制主侧栏的切换按钮。
                用法
                该插件可以作为jQuery插件或使用数据API激活。
                数据API
                添加data-widget="pushmenu"到按钮以激活插件。-->
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars">导航栏</i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <h3 class="nav-link"
                    style="position: absolute; right: 10px; color: #0a001f; font-family: 'STXingkai';">
                    在你遗忘的 小时候 我 在等着。</h3>
            </li>

        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3" th:action="@{/search}">
            <div class="input-group input-group-sm">
                <input name="blogName" class="form-control form-control-navbar" type="search" placeholder="按博客名搜索..."
                       aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </form>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <!-- Main Sidebar Container 左侧主容器 -->
    <aside class="main-sidebar sidebar-light-primary  elevation-4 animated fadeInLeft">
        <!-- 左侧容器头-->
        <h1>
            <a th:href="@{index}" class="brand-link">
                <img th:src="@{/upload/avatar.jpg}" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light"><h3 style="color: black">WhyBlog</h3></span>
            </a>
        </h1>
        <!-- Sidebar -->
        <!--     被选中的颜色-->
        <div class="sidebar ">
            <!-- Sidebar Menu -->
            <nav class="mt-4">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">刀斩肉身</li>
                    <li class="nav-item ">
                        <a th:href="@{/index}" class="nav-link " >
                            <i class="fa fa-home nav-icon"></i>
                            <p>首页</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a th:href="@{/type}" class="nav-link active">
                            <i class="fa fa-bookmark nav-icon"></i>
                            <p>分类</p>
                        </a>
                    </li>
<!--                    <li class="nav-item">-->
<!--                        <a href="https://leetcode-cn.com/u/why-21/" target="_blank" class="nav-link">-->
<!--                            <i class="fa fa-tags nav-icon"></i>-->
<!--                            <p>leetCode主页</p>-->
<!--                        </a>-->
<!--                    </li>-->
                    <li class="nav-item">
                        <a href="https://gitee.com/why741/" target="_blank" class="nav-link">
                            <i class="fa fa-tags nav-icon"></i>
                            <p>gitee</p>
                        </a>
                    </li>
                    <li class="nav-header">心斩灵魂</li>
                    <li class="nav-item">
                        <a th:href="@{/archive}" class="nav-link" >
                            <i class="fa fa-archive nav-icon"></i>
                            <p>归档</p>
                        </a>
                    </li>

                    <li class="nav-header">心斩灵魂</li>
                    <li class="nav-item">
                        <a class="nav-link" onclick="alert('页面开发中~')">
                            <i class="fa fa-archive nav-icon"></i>
                            <p>我的学习路线</p>
                        </a>
                    </li>


                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">

                    <!-- /.col -->
                    <div class="col-md-9 animated fadeIn">
                        <!--            上方分类内容-->

                        <div class="card card-blue card-outline">
                            <div class="card-body">
                                <!--               选中是info 没选中的outline-->
                                <button name="typeBtn" style="margin: 6px" th:each="type :${listType}"
                                        th:class="${typeId==type.id?'btn btn-primary bb btn-sm mt-2':'btn btn-outline-primary btn-sm mt-2'}"
                                        th:value="${type.id}">
                                    <span th:text="${type.name}">Java</span>
                                    <span name="blogNums" th:text="${#lists.size(type.blogs)}" class="ml-2 badge badge">5</span>
                                    <!--                                    <input type="hidden" th:value="${typeId}">-->
                                    <!--                                    th:value="${typeId}"-->
                                </button>
                            </div>
                            <!--              具体分类的样式-->
                        </div>
                        <div class="card card-blue card-outline mb-5">
                            <div class="card-header">
                                <!--                博客数量-->
                                <h3 class="card-title float-right">
                                    共 <span id="curBlogNums" class="text-blue text-xl">1</span> 篇博客
                                </h3>
                            </div><!-- /.card-header -->
                            <!--              卡片体-->
                            <div th:each="blog:${blogs.list}" class="card-body bg-hover-gray" >
                                <div class="mb-1">
                                    <a th:href="'/detail/'+${blog.id}" th:text="${blog.name}"  target="_blank" class="text-lg text-bold link-title">我是一只猫，快乐的星猫，一起喵喵喵</a>
                                    <span class="badge badge-primary">原创</span>
                                </div>
                                <p th:text="${blog.description}">
                                    Lorem ipsum represents a long-held tradition for designers,
                                    typographers and the like. Some people hate it and argue for
                                    its demise, but others ignore the hate as they create awesome
                                    tools to help create filler text for everyone from bacon lovers
                                    to Charlie Sheen fans.
                                </p>
                                <p><i class="far fa-calendar-alt mr-1"></i>
                                    <span th:text="${#dates.format(blog.update_time,'YYYY-MM-dd HH:mm:ss')}" class="text-sm mr-2"> 2019-01-01 10:08</span>
                                    <i class="far fa-eye mr-1"></i>
                                    <span th:text="${blog.views}" class="text-sm"> 10</span>
                                </p>
                                <p class="mb-0">
                                    <button class="btn btn-outline-primary btn-xs" th:text="${blog.type.name}">分类</button>

                                </p>
                                <hr class="m-2 bg-blue">
                            </div><!-- /.card-body -->
                           
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end">
                                    <li class="page-item">
                                        <span class="page-link" th:text="' 共'+${blogs.navigatepageNums.length}+'页'"></span>
                                    </li>
                                    <li  th:if="${blogs.hasPreviousPage}" class="page-item ">
                                        <a  class="page-link"  th:href="'/type?pageNum='+${blogs.prePage}+'&typeId='+${typeId}"  tabindex="-1" aria-disabled="true">Previous</a>
                                    </li>
                                    <li th:each="num:${blogs.navigatepageNums}" th:class="${blogs.pageNum==num?'page-item active':''}" class="page-item">
                                        <a   class="page-link " th:href="'/type?pageNum='+${num}+'&typeId='+${typeId}" th:text="${num}"></a>
                                    </li>

                                    <li  class="page-item">
                                        <a th:if="${blogs.hasNextPage}" class="page-link"  th:href="'/type?pageNum='+${blogs.nextPage}+'&typeId='+${typeId}"  tabindex="-1" aria-disabled="true">Next</a>
                                    </li>
                                </ul>
                                <div ></div>
                            </nav>
                        </div>
                        <!-- /.nav-tabs-custom -->
                    </div>
                    <div class="col-md-3 animated fadeInRight">
                        <!-- Profile Image -->
                        <div class="card widget-user ">
                            <!-- Add the bg color to the header using any of the bg-* classes -->
                            <div class="widget-user-header bg-blue">
                                <h3 class="widget-user-username">闰土和戴夫</h3>
                                <h5 class="widget-user-desc">记录技术成长点滴</h5>
                            </div>
                            <div class="widget-user-image">
                                <img class="img-circle elevation-2" src="/upload/avatar.jpg" alt="User Avatar">
                            </div>
                            <div class="card-body pt-5">
                                <p style="font-family: 'STXingkai';font-size: 24px;color: black">
                                    Java初学者,大三狗一枚,喜欢学轮子,梦想造轮子,目前备战秋招中~
                                </p>

                                <ul class="list-group list-group-unbordered">
                                    <li class="list-group-item">
                                        <strong><i class="far fa-bookmark mr-2"></i>分类<br/></strong>
                                        <a href="" th:each="type : ${listType}" th:text="${type.name}" th:href="'/type?typeId='+${type.id}"
                                           style="margin: 5px" class="btn btn-outline-primary btn-sm">Java</a>
                                    </li>

                                    <li class="list-group-item">
                                        <strong><i class="fa fa-map-marker-alt mr-2"></i>位置</strong>
                                        <div class="text-muted">辽宁 沈阳</div>
                                    </li>

                                    <li class="list-group-item">
                                        <strong><i class="fa fa-pencil-alt mr-2"></i>技能(只会一点点,不能会多了)</strong>
                                        <div class="text-muted">
                                            <span class="badge badge-success">Java</span>
                                            <span class="badge badge-success">Mysql</span>
                                            <span class="badge badge-success">Redis</span>
                                            <span class="badge badge-success">Spring全家桶</span>
                                            <span class="badge badge-success">Linux</span>
                                            <span class="badge badge-success">Docker</span>
                                            <span class="badge badge-success">Mybatis</span>
                                            <span class="badge badge-success">Html</span>
                                            <span class="badge badge-success">Css</span>
                                            <span class="badge badge-success">JavaScript</span>
                                            <span class="badge badge-success">Vue</span>
                                            <span class="badge badge-success">Ajax</span>
                                        </div>
                                    </li>

                                    <li class="list-group-item">
                                        <strong><i class="fa fa-lightbulb mr-2"></i>爱好</strong>
                                        <div class="text-muted">
                                            <span class="badge badge-warning">编程</span>
                                            <span class="badge badge-warning">健身</span>
                                            <span class="badge badge-warning">LOL</span>
                                        </div>
                                    </li>

                                    <li class="list-group-item text-center">
                                        <button class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                                data-placement="top"
                                                title="1585049082">
                                            <i class="fab fa-qq"></i>
                                        </button>
                                        <button class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                                data-placement="top"
                                                title="17542912457">
                                            <i class="fab fa-weixin"></i>
                                        </button>
                                        <button
                                                class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                                data-placement="top"
                                                title="建昌县凌东高级中学">
                                            <i class="fab fa-xing"></i>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <p class="text-center mb-1">
            Powered by AdminLTE
        </p>
        <p class="text-center">
            <a href="http://beian.miit.gov.cn" target="_blank">辽ICP备2020013405号</a>
        </p>
    </footer>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/js/adminlte.min.js}"></script>
<!--  -->
<script th:src="@{/js/tooltip.init.js}"></script>

<script type="text/javascript">

    //  Click event of sort button list
    $("[name='typeBtn']").click(function () {
        let val = $(this).val();
        window.location = '/type/?typeId=' + val;
    });


    $(document).ready(function () {
        //博客分类按钮中显示的博客数量放到当前博客数量里面
        let text = $('.bb').find('[name="blogNums"]').text();
        $('#curBlogNums').text(text)
    })

</script>


</body>
</html>
